<!DOCTYPE html>
<svg>
  <linearGradient id="g">
    <stop stop-color="green"/>
  </linearGradient>
  <rect width="100" height="100"/>
</svg>
<div></div>
<script>
var div = document.querySelector('div');
var shadowRoot = div.attachShadow({ mode: 'closed' });
shadowRoot.innerHTML = '<svg>'+
    '<linearGradient id="g"><stop stop-color="red"/></linearGradient></svg>';
document.body.offsetTop;
document.querySelector('rect').setAttribute('fill', 'url(#g)');
</script>
